<template>
  <div class="body" id="main">
    <section class="data-banner person-banner sectionItem">
      <div id="w1" class="anchor" style="-webkit-transform:translateY(-122px);transform: translateY(-122px)"></div>
      <div class="center-block">
        <div class="Crumbs">
          您的位置：
          <router-link to="/home">首页<b>&gt;</b></router-link>
          <router-link to="/dataService">数据服务<b>&gt;</b></router-link>
          <a href="javascript:void(0);">个人主页</a>
        </div>
      </div>

      <div class="center-block clearfix">
        <div class="person_card">
          <img src="@/assets/images/lyf.png" alt="">
        </div>
        <div class="person_info">
          <div class="person_base">
            <span class="name">{{baseInfo.staffName}}</span>
            <span class="sex">{{baseInfo.staffSex==="RY_XB_0001"?"男":"女"}}</span>
            <span class="ID">{{baseInfo.cardNo}}</span>
          </div>
          <ul class="personnel clearfix">
            <li v-if="baseInfo.isReg" class="col_zc">注册人员</li>
            <li v-if="baseInfo.isTitle" class="col_zcg">职称人员</li>
            <li v-if="baseInfo.isSafety" class="col_ag">安管人员</li>
            <li v-if="baseInfo.isProf" class="col_gw">岗位人员</li>
            <li v-if="baseInfo.isSpecial" class="col_tz">特种人员</li>
            <li v-if="baseInfo.isTech" class="col_js">技术工人</li>
          </ul>
          <ul class="person_detail">
            <li>
              <label>最高学历</label>
              <span>{{baseInfo.highestEdu}}</span>
            </li>
            <li>
              <label>所学专业</label>
              <span>{{baseInfo.majorStudied}}</span>
            </li>
            <li>
              <label>毕业院校</label>
              <span>{{baseInfo.majorStudied}}</span>
            </li>
            <li>
              <label>在聘单位</label>
              <span>{{baseInfo.compName}}</span>
            </li>
          </ul>
          <div class="score">
            <p class="score_info">企业业绩评分
              <a href="javascript:void(0);"><i class="dtFont dtFont-wenhao1" style="color: #9E9E9E;font-size: 15px"></i>评分规则</a>
            </p>
            <span class="num">1.230</span>
          </div>
        </div>

      </div>

    </section>

    <navigation id="nav" :navData="personData"></navigation>

    <!--当前行为限制-->
    <section class="sectionItem">
      <div class="center-block">
        <div id="w2" class="anchor"></div>
        <tab-component title="当前行为限制" tabPosition="right">
          <tab-panel-component name="limit">
            <div v-show="tableCbr.list.length>0">
              <el-table :data="tableCbr.list" style="width: 100%" class="detail-table">
                <el-table-column type="index" label="序号" width="80"></el-table-column>
                <el-table-column prop="resArea" label="限制区域" width="185"></el-table-column>
                <el-table-column prop="" label="限制时间" width="250">
                  <template slot-scope="scope">
                    <div>{{scope.row.limStartTime | dateFormat}}~{{scope.row.limEndTime | dateFormat}}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="behavioralRes" label="行为限制内容" width="310"></el-table-column>
                <el-table-column prop="chuFa" label="处罚来源（处罚文号时间）"></el-table-column>
              </el-table>
              <div class="padding-top-20">
                <el-pagination
                  background
                  @size-change="getTableCbr"
                  @current-change="getTableCbr"
                  :current-page.sync="query.pg"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size.sync="query.pgsz"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="tableCbr.total">
                </el-pagination>
              </div>
            </div>
          </tab-panel-component>
          <noData v-show="tableCbr.list.length<1" style="height: 400px"/>
        </tab-component>
      </div>

    </section>

    <!--证书信息-->
    <section class="sectionItem">
      <div class="sectionItemHead">
        <div class="QuaT center-block">
          <div class="anchor" id="w3"></div>
          <certificate-Info></certificate-Info>
        </div>
      </div>
    </section>
    <!--信用行为-->
    <section class="sectionItem bg">
      <div class="QuaT center-block">
        <div id="w4" class="anchor"></div>
        <creditBehavior></creditBehavior>
      </div>
    </section>

    <!--工作履历-->
    <section class="sectionItem">
      <div class="center-block">
        <div id="w5" class="anchor"></div>
        <tab-component title="工作履历" tabPosition="right">
          <tab-panel-component name="work">
            <ul class="record">
              <li class="clearfix" v-for="(item,index) in workHistory" :key="index">
                <i class="dtFont dtFont-gongsi1"></i>
                <h3 class="name">{{item.compName}}
                  <small>{{item.compStartTime}} ~ {{item.compEndTime}}</small>
                </h3>
                <div class="content clearfix">
                  <h4 class="baseInfo">职位<span>{{item.compPost}}</span></h4>
                  <div class="work">
                    <p class="title">工作内容</p>
                    <p class="text">{{item.compContent}}</p>
                  </div>
                  <div class="build">
                    <p class="title">参与项目</p>
                    <p class="buildText" v-for="(value,index) in item.compProject" :key="index"><a>{{value}}</a></p>
                  </div>
                </div>
              </li>
            </ul>
          </tab-panel-component>
        </tab-component>
      </div>
    </section>

    <!--人员业绩-->
    <section class="sectionItem padding-top-20">
      <div class="QuaT center-block">
        <div id="w6" class="anchor"></div>
        <achievement></achievement>
      </div>
    </section>
  </div>

</template>

<script>
  import {
    getBaseInfo,
    getTableCbr,
    getBehavior,
    getWorkHistory,
    getTableSta
  } from '@/api/dataService/index';
  import navigation from '@/components/navigation';
  import certificateInfo from './components/certificateInfo';
  import creditBehavior from './components/creditBehavior';
  import achievement from './components/achievement';
  import noData from '@/components/noData';

  export default {
    name: "personDetail",
    props: ["staffName", "staffSex", "cardNo"],
    components: {navigation, certificateInfo, creditBehavior, noData,achievement},
    data() {
      return {
        id: String,
        personData: {//导航监听
          navList: [
            {name: '基本信息', id: 'w1'},
            {name: '当前行为限制', id: 'w2'},
            {name: '证书信息', id: 'w3'},
            {name: '信用行为', id: 'w4'},
            {name: '工作履历', id: 'w5'},
            {name: '人员业绩', id: 'w6'}
          ],
          top: 495
        },
        baseInfo: {},//基本信息
        tableCbr: {//当前行为限制
          name: 'tableCbr',
          fun: 'getTableCbr',
          list: [],
          total: 0
        },
        query: {
          pg: 1,
          pgsz: 5
        },
        workHistory: {},//工作履历
      }
    },
    mounted() {
      this.id = this.$route.query.id || '';
      this.getBaseInfo(this.id);
      this.getTableCbr();
      this.getWorkHistory();
      //console.log(this.id)
    },
    methods: {
      tab(obj, index) {
        // obj.query.value = e.target.dataset.value;
        obj.query.value = obj.tabs[index].value;
        this[obj.fun]();
      },
      //获取人员基本信息
      getBaseInfo(id) {
        getBaseInfo(id).then(res => {
          this.baseInfo = res;
        })
      },
      //获取人员当前行为限制
      getTableCbr(data) {
        let {pg, pgsz} = this.query;
        data = {pg, pgsz};
        getTableCbr(data).then(res => {
          this.tableCbr.list = res.rows || [];
          this.tableCbr.total = res.total;
        })
      },
      //获取人员工作履历
      getWorkHistory(data) {
        getWorkHistory(data).then(res => {
          this.workHistory = res;
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '../../../assets/css/credit.css';
</style>
